<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./JS/jsmethon.js">
    
    <style>
        body{
            font-size: 14px;
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            background-color: #242424;
            overflow: hidden;
        }
        .box{
            display: flex;
            width:80%;
            height: 100%;
            
            margin: 150px auto 0px;
            box-sizing: border-box;
            display: flex;
            /* justify-content: space-between; */
            text-align: center;
            flex-wrap: wrap;
            align-content: flex-start;
            

        }
        .keyitem{
            
            
            
            font-size: 1.75rem;
            width: 30px;
            height: 50px;
            color:#fff;
            box-sizing: border-box;
            line-height: 50px;
            margin-right: 9px;
            margin-top: 6px;
            
        }
        .actived{
            color: #4e9309;
            background-color: #9fed51;
            border-bottom: solid 3px #9fed51;
        }
        .err{
            color: #f4b6b6;
            background-color: #5b1d1d;
            border-bottom: 3px solid #5b1d1d;

        }
        .now{
            background-color: #000;
            border-bottom: 3px solid #9fed51;
            font-size: 1.75rem;
            width: 30px;
            height: 50px;
            color:#fff
        }
         /*active font-size #4e9309 
            active border 2px solid #4e9309
            active backgroundcolor #9fed51

            now border 4px solid #4e9309
            color #2c2c2c
            fontsize 36px
            height 80px 70
            width 80px 70
            backgroundcolor #fff
            
            no 没有边框
         */
         /* 
         练习 body fontsize 14px
                   一行26
         active     font-size: 1.75rem;
                        width: 30px;
                        height: 50px;
                        color: #4e9309
                        background-color: #9fed51;
                        border-bottom: 3px solid #9fed51;


         now    background-color: #000;
                border-bottom: 3px solid #9fed51
                font-size: 1.75rem;
                width: 30px;
                height: 50px;
                color fff



         no     font-size: 1.75rem;
                width: 30px;
                height: 50px;
                color fff

         err     color: #f4b6b6;
                background-color: #5b1d1d;
                border-bottom: 3px solid #5b1d1d;
                font-size: 1.75rem;
                width: 30px;
                height: 50px;
         */
    </style>
</head>
<body>
    <div class="box">
        <div data-key="83" class="keyitem ">S</div>
        <div data-key="83" class="keyitem ">S</div>
        <div data-key="83" class="keyitem ">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="83" class="keyitem">S</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
        <div data-key="76" class="keyitem">L</div>
    </div>
    </div>
    <script>
       

        

       
      //  -------------------------------------------------------------
        const keylist=document.querySelectorAll('.keyitem');
        let arr=[...keylist];
        // console.log(arr[2]);
        arr[0].classList.add('now');
        
        let n=1;
        window.addEventListener("keydown",function(e){
            
            const keys=document.querySelectorAll(`div[data-key="${e.keyCode}"]`);
            let innerText=(e.key).toUpperCase();
            

            if( innerText==arr[n-1].innerText){
                arr[n-1].classList.remove('now');
                arr[n-1].classList.add("actived");
                n=n+1;  
                arr[n-1].classList.add('now');   
            }else{
                arr[n-1].classList.remove('now');
                arr[n-1].classList.add("err");
                n=n+1;
                arr[n-1].classList.add('now');
                
            }   
        })

        // ------------------------------------------------------------------
        addval(6)
        
        function addval(tyy){
            let intval
        for(let n=0;n<keylist.length;n++){
             intval= Math.round(Math.random()*(tyy*1)+0.5);
             console.log(intval)
            if(intval==1){
                
                keylist[n].innerText="R";
            }else if(intval==2){
                keylist[n].innerText="T";
            }
            else if(intval==3){
                keylist[n].innerText="F";
            }
            else if(intval==4){
                keylist[n].innerText="V";
            }
            else if(intval==5){
                keylist[n].innerText="B";
            }
           
            else{
                keylist[n].innerText="G";
            }
            console.log(" ")
            // if(intval==0){

            // }   
            }   
        }
        

    </script>
</body>
</html>